<template>
  <div class="baseInfo">
    <div class="perInfo">
      <img src="../../assets/111.png" alt="" />
      <div class="infoBox">
        <p>姓名：<span>liyinan</span></p>
        <p>ID：<span>456545</span></p>
        <p>职务：<span>经理</span></p>
      </div>
      <div class="infoBox">
        <p>联系电话：<span>2343546456</span></p>
        <p>住址：<span>广泛南方的能否，的那份</span></p>
        <p>邮箱：<span>sudhf@qq.con</span></p>
      </div>
    </div>

    <div class="deal">
      <div class="spannel">
        <em>123<span>件</span></em>
        <b>已处理订单</b>
      </div>
      <div class="spannel scolor">
        <em>123<span>件</span></em>
        <b>待处理订单</b>
      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.perInfo {
  display: flex;
  height: 200px;
  margin-left: 100px;
  img {
    width: 200px;
    height: 200px;
    border: 1px solid #2453;
    border-radius: 60%;
  }
  .infoBox {
    margin: 10px 30px;
    font-size: 1.5em;
    line-height: 68px;
  }
  span {
    font-size: 0.9em;
    color: rgb(71, 70, 70);
  }
}
.deal {
  display: flex;
  flex-direction: row;
  justify-content: center;
  .spannel {
    width: 300px;
    height: 100px;
    overflow: hidden;
    text-align: center;
    position: relative;
    background-color: #fff;
    border: 1px solid #e7e7e9;
    margin:80px 40px
  }
  .spannel em {
    font-style: normal;
    font-size: 50px;
    line-height: 50px;
    display: inline-block;
    margin: 10px 0 0 20px;
    font-family: 'Arial';
    color: #83a2ed;
  }

  .spannel span {
    font-size: 14px;
    margin-left: 10px;
  }
  .spannel b {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    line-height: 24px;
    background: #e5e5e5;
    color: #333;
    font-size: 14px;
    font-weight: normal;
  }
  .scolor em{
    color: red;
  }
}
</style>
